<template>
  <div>
    <!--更多操作-->
    <div class="topLeft" v-if="show === true">
      <el-form ref="form" :model="queryList" label-width="80px" class="form">
        <el-form-item label="选择车辆">
          <el-input @click.native="handleSearchEvent" v-model="queryList.deviceNo" placeholder="点击选择车辆"
                    style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="快速选择">
          <el-select v-model="value" placeholder="请选择" @change="changeValue()">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <div class="block">
            <el-date-picker
              @change="selectSTime"
              style="width: 100%"
              v-model="queryList.startTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="结束时间">
          <div class="block">
            <el-date-picker
              style="width: 100%"
              @change="selectETime"
              v-model="queryList.endTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </el-form-item>
<!--        <el-form-item label="停车点">-->
<!--          <el-select v-model="value2" placeholder="请选择">-->
<!--            <el-option-->
<!--              v-for="item in options2"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="显示警报">-->
<!--          <el-switch v-model="form.delivery"></el-switch>-->
<!--          <el-button style="border: none;background: none">报警列表</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->

<!--          &lt;!&ndash;        <el-button size="mini" @mouseover.native="showOperate" >更多操作</el-button>&ndash;&gt;-->
<!--          &lt;!&ndash;          <el-dropdown style="margin-left: 10px">&ndash;&gt;-->
<!--          &lt;!&ndash;            <el-button size="mini" class="el-dropdown-link">&ndash;&gt;-->
<!--          &lt;!&ndash;              下拉菜单&ndash;&gt;-->
<!--          &lt;!&ndash;            </el-button>&ndash;&gt;-->
<!--          &lt;!&ndash;            <el-dropdown-menu slot="dropdown">&ndash;&gt;-->
<!--          &lt;!&ndash;              <el-dropdown-item>轨迹列表</el-dropdown-item>&ndash;&gt;-->
<!--          &lt;!&ndash;              <el-dropdown-item>原始数据</el-dropdown-item>&ndash;&gt;-->
<!--          &lt;!&ndash;              <el-dropdown-item>保存轨迹</el-dropdown-item>&ndash;&gt;-->
<!--          &lt;!&ndash;            </el-dropdown-menu>&ndash;&gt;-->
<!--          &lt;!&ndash;          </el-dropdown>&ndash;&gt;-->
<!--        </el-form-item>-->
      </el-form>
      <div style="display: flex">
        <div style="margin: 18px 0 0 10px ">
          <el-button size="max" type="primary" @click="onSubmit">查询轨迹</el-button>
        </div>
        <div>
          <ul id="btns">
            <li id="run">开始</li>
            <li id="pause">暂停</li>
            <li id="show">信息</li>
<!--            <li id="add" :visible.sync="add">加速</li>-->
          </ul>
        </div>
      </div>
    </div>
    <!--显示车辆监控数据内容 -->
    <div @click="isShow" class="collectT">
      <i v-if="show === true"
         class="el-icon-caret-bottom el-input__icon"
         slot="suffix"
      >
      </i>

      <i v-else
         class="el-icon-caret-top el-input__icon"
         slot="suffix"
      >
      </i>
    </div>
    <!--    抽屉1 从左往右  -->
    <el-drawer
      class="navBtn"
      style="z-index: 9999;"
      title="我是标题"
      :visible.sync="drawer2"
      :direction="direction"
      :with-header="false"
    >
      <ul>
        <li style="font-size: 14px" v-for="item in pointlist" @click="getV(item)">
          <el-button plain style="color: black; border: none;background: none"> {{ item.carNo }} ({{item.compName.substr(0,8)}})
            <p style="display: none"> ({{item.deviceNo }})</p>
          </el-button>

        </li>
      </ul>
    </el-drawer>
    <!--    抽屉2 从右往左  -->
    <div>
      <el-drawer
        :modal="false"
        title="更多信息"
        :visible.sync="drawer"
      >
        <div style="padding-left: 20px;border-top: darkgray solid 1px;padding-top: 5px; font-size: 14px">
          <p><span style="color: darkgray">单位名称&nbsp&nbsp</span><span
            style="position: absolute;left: 90px"
          >{{ list.compName }}</span></p>
          <p><span style="color: darkgray">车牌号&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{list.carNo }}</span></p>
          <p><span style="color: darkgray">车辆类型&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.type
            }}</span></p>
          <p><span style="color: darkgray">设备号&nbsp&nbsp</span><span
            style="position: absolute;left: 90px"
          >{{ list.deviceNo }}</span></p>
          <p><span style="color: darkgray">司机姓名&nbsp&nbsp</span><span
            style="position: absolute;left: 90px"
          >{{ list.driverName }}</span></p>
          <p><span style="color: darkgray">司机电话&nbsp&nbsp</span><span
            style="position: absolute;left: 90px"
          >{{ list.driverPhone }}</span></p>
          <p><span style="color: darkgray">百度经度&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.lot
            }}</span></p>
          <p><span style="color: darkgray">百度纬度&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.lat
            }}</span></p>
          <!--          <p><span style="color: darkgray">在线时长&nbsp&nbsp</span><span-->
          <!--            style="position: absolute;left: 90px">{{ list.iniweight }}</span></p>-->
          <p><span style="color: darkgray">载重&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.weight
            }}</span></p>
          <p><span style="color: darkgray">车速&nbsp&nbsp</span><span style="position: absolute;left: 90px">
            {{list.speed}}km/h</span></p>
<!--          <p><span style="color: darkgray">车速&nbsp&nbsp</span><span style="position: absolute;left: 90px">-->
<!--            {{list.speed}}km/h</span></p>-->
          <p><span style="color: darkgray">车辆状态&nbsp&nbsp</span><span
            style="position: absolute;left: 90px"
          >{{ list.status }}</span></p>

        </div>
      </el-drawer>
    </div>
    <div class="bitmap1" id="alma"></div>
  </div>
</template>
<script>
import ScrollPane from '../../../layout/components/TagsView/ScrollPane'
import { getAllLocations, getList, getNo } from '@/api/wx/loconmap'
import { MessageBox } from 'element-ui'
// import Convertor from '@/utils/band/bmap'
export default {
  name: 'index',
  components: {
    ScrollPane
  },
  data() {
    return {
      list: '',
      add:2500,
      dataList: [
      ],
      form: {
        deviceNo: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      queryList: {
        deviceNo: '',
        endTime: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime(),
        startTime: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
        pageNumber: '',
        pageSize: ''
      },
      //快速选择
      options: [{
        value: '选项1',
        label: '今天'
      }, {
        value: '选项2',
        label: '昨天'
      }, {
        value: '选项3',
        label: '前天'
      }
        // }, {
        //   value: '选项4',
        //   label: '近三天'
        // }, {
        //   value: '选项5',
        //   label: '近七天'
        // }, {
        //   value: '选项6',
        //   label: '自定义'
        // }]
      ],
      value: '选项1',
      //停车点
      options2: [{
        value: '选项1',
        label: '不显示'
      }, {
        value: '选项2',
        label: '超过5分钟'
      }, {
        value: '选项3',
        label: '超过10分钟'
      }, {
        value: '选项4',
        label: '超过30分钟'
      }, {
        value: '选项5',
        label: '超过1小时'
      }, {
        value: '选项6',
        label: '超过2小时'
      }, {
        value: '选项7',
        label: '超过4小时'
      }, {
        value: '选项8',
        label: '超过8小时'
      }],
      value2: '选项3',
      drawer2: false,
      direction: 'ltr',

      operate: false,//跟多操作

      activeName: 'first',
      show: true, //显示左侧车辆监控数据
      drawer: false,
      // allList: 0,//全部车辆数
      // onList: 0,//在线车辆数
      // offList: 0,//离线车辆数
      pointlist: [],
      // isOnline: '',//车辆情况
      lat: 112.7921,
      log: 27.0663,
      path: []

    }
  },
  mounted() {
    this.baiduMap()
  },

  methods: {
    selectSTime() {
      this.queryList.startTime = this.queryList.startTime.valueOf()
    },
    selectETime() {
      this.queryList.endTime = this.queryList.endTime.valueOf()
    },
    getV(item) {
      this.$data.queryList.deviceNo = item.deviceNo
      this.drawer2 = false
    },
    onSubmit() {
      let that = this
      getNo(that.queryList).then(res => {
        that.path = res.dataList
        console.log("-----",res.dataList)
        if (res.dataList.length === 0){
          MessageBox.alert('未查询到信息,请更换车辆或时间段', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }else {
          that.baiduMap()
        }

      })
    },
    getList() {
      getAllLocations().then(res => {
        if (res.code === 200) {
          this.pointlist = res.data.carLocationVoList

        }
      })
    },
    //快速选择
    changeValue(e)
    {
      let that = this

      switch (that.value) {
        case '选项1':
          //今天开始时间
          let todayStart = new Date(new Date(new Date().toLocaleDateString()).getTime())
          this.queryList.startTime = todayStart.getTime()
          //今天结束时间
          let todayEnd = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
          this.queryList.endTime = todayEnd.getTime()
          break
        case '选项2':
          //昨天开始时间
          let yesterdayStart = new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000)
          this.queryList.startTime = yesterdayStart.getTime()
          //昨天结束时间
          let yesterdayEnd = new Date(new Date(new Date().toLocaleDateString()).getTime() - 1)
          this.queryList.endTime = yesterdayEnd.getTime()
          break
        case '选项3':
          //前天开始时间
          let beforeYesterdayStart = new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 2)
          this.queryList.startTime = beforeYesterdayStart.getTime()
          //前天结束时间
          let beforeYesterdayEnd = new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 - 1)
          this.queryList.endTime = beforeYesterdayEnd.getTime()

          break
      }

    },
    handleClick(tab, event) {
      console.log('====', tab, event)
    },
    handleSearchEvent() {
      let that = this
      that.getList()
      setTimeout(
        ()=> {
          that.drawer2 = true
        }, 600);
    },
    ap() {
      this.drawer = true
    },
    isShow() {
      this.show = !this.show
    },
    baiduMap(opts) { //轨迹
      let that = this
      let lushu
      let path = JSON.parse(JSON.stringify(this.path))
      //初始化地图,选取第一个点为起始点
      let map = new BMapGL.Map('alma')
      map.centerAndZoom(new BMapGL.Point(112.959495, 27.087043), 16)    // 初始化地图，设置中心点坐标和地图级别
      map.addControl(new BMapGL.MapTypeControl());
       map.addControl(new BMapGL.NavigationControl());//放大 缩小
      // map.addControl(new BMapGL.OverviewMapControl(true))
       map.addControl(new BMapGL.ScaleControl());
      map.enableScrollWheelZoom()
      const point = []
      for (let i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lot, path[i].lat))
      }

      map.addOverlay(new BMapGL.Polyline(point, { strokeColor: '#00CC00' ,strokeWeight:10,strokeOpacity:0.5,
       }))
      map.setViewport(point)

      lushu = new BMapGLLib.LuShu(map, point, {
        defaultContent: '正在行驶...',
        autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        icon: new BMapGL.Icon(require('../../../assets/12212.jpeg'), new BMapGL.Size(50, 50)),
        speed: that.$data.add,
        enableRotation: false,//是否设置marker随着道路的走向进行旋转
        landmarkPois: [
          {lng:path[0].lot,lat:path[0].lat,html:'<img src="https://n.sinaimg.cn/sinacn12/600/w800h600/20180323/094c-fysnevm0589825.gif" alt="" style="width: 60px;height: 60px;">',pauseTime:3},
          {lng:path[path.length-1].lot,lat:path[path.length-1].lat,html:'<img src="https://5b0988e595225.cdn.sohucs.com/images/20180102/294b20cfea124f8eb0f83dc30c261820.gif" alt="" style="width: 60px;height: 60px;">'}
        ]
      })

      //绑定事件
      $('run').onclick = function() {
        lushu.start()
      }
      $('pause').onclick = function() {
        lushu.pause()
      }
      $('show').onclick = function() {
        //展示信息窗口
        if (that.queryList.deviceNo.length < 10) {
          MessageBox.alert('请填写车辆', '警告', {
            confirmButtonText: '确定',
            type: 'error'
          })
        } else {
          getList(that.queryList.deviceNo).then(res => {
            that.$data.list = res.data
          })
          that.drawer = true
        }
      }
      function $(element) { //获取e $
        return document.getElementById(element)
      }

    }

  }

}
</script>
<style scoped>
/*左上角*/
.topLeft {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 22%;
  background-color: #FFFFFF;
  padding-top: 20px;
  padding-right: 20px;
  z-index: 1000
}

/*表单*/
.form {
  width: 100%;

}

/*跟多操作*/
.moreOperate {
  position: absolute;
  bottom: 13%;
  right: 22%;
  font-size: 14px;
  background-color: #FFFFFF;
  border: #D3D3D3 solid 1px;
  box-shadow: 2px 2px 4px #DCDCDC;
}

.moreOperate ul {
  width: 90px;
  list-style: none;
  padding-inline-start: 0px;
}

.moreOperate ul li {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
}

.moreOperate ul li:hover {
  background-color: #D3D3D3;
}

/*车辆监控数据内容*/
.nav {
  width: 20%;
  height: 950px;
  float: left;
  padding: 0 10px;
  background: rgb(245, 245, 245);
  border-right: solid rgb(220, 222, 226) 1px;
  font-size: 14px;
}

/*.nav .el-tabs__nav-wrap::after {*/
/*  width: 95%;*/
/*}*/

.navBtn .el-button:focus,
.navBtn .el-button:hover {
  font-weight: bold;
  letter-spacing: 1px;
}

/*列表去掉默认圆点*/
.navBtn ul {
  list-style: none;
  padding-inline-start: 10px;
  /*border: red solid 1px;*/
}

.navBtn ul li {
  height: 36px;
  line-height: 36px;
  /*border: red solid 1px;*/
}

.state {
  position: absolute;
  right: 10px;
  display: inline-block;
  min-width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  color: white;
  background-color: #C0C0C0;
  border: #A9A9A9 solid 1px;
  border-radius: 15px;
  margin-top: 8px;
  letter-spacing: 1px;
}

.stateT {
  position: absolute;
  right: 10px;
  display: inline-block;
  min-width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  color: white;
  background-color: rgb(64, 158, 255);
  border: #4169E1 solid 1px;
  border-radius: 15px;
  margin-top: 8px;
  letter-spacing: 1px;
}

/*显示车辆监控数据内容*/
.collectT {
  position: absolute;
  top: 0;
  left: 10%;
  width: 47px;
  height: 10px;
  background-color: rgba(126, 124, 121, .4);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  z-index: 1000;
}

.collectT:hover {
  background-color: rgb(64, 158, 255);
}

.collectF {
  position: absolute;
  top: 350px;
  left: 0px;
  width: 17px;
  height: 55px;
  background-color: rgba(126, 124, 121, .4);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  /*border: solid 1px green;*/
  z-index: 1000;
}

/*矢量图*/
.collectT .el-input__icon,
.collectF .el-input__icon {
  margin: 0;
  padding: 0;
  position: relative;
  top: -17px;
  left: 15px;
  width: 5px;
  height: 10px;
  color: rgb(251, 249, 244);
  background-color: red;
}

.bitmap {
  width: 80%;
  height: 950px;
  float: right;
}

.bitmap1 {
  width: 100%;
  height: 950px;
  float: right;
}

/* 去除百度地图版权那行字 和 百度logo */
.bitmap1 >>> .anchorBL,
  /*>>> .anchorTR,*/
>>> .BMap_zlHolder {
  display: none;
  visibility: hidden;
}

.drawer_pwd {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
}

/deep/ .el-drawer {
  width: 300px !important;
}

ul li {
  list-style: none;
}

#result {
  width: 100%
}

#btns {
  display: flex;
  width: 174px;
  bottom: 3.5rem;
  margin-left: 30px;
  padding-left: 15px;
  border-radius: .25rem;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);

}

/*}#btns {*/
/*  z-index: 999;*/
/*  position: fixed;*/
/*  bottom: 3.5rem;*/
/*  margin-left: 2.5rem;*/
/*  padding-left: 0;*/
/*  border-radius: .25rem;*/
/*  display: flex;*/
/*  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
/*  text-align: center;*/
/*}*/

#btns li {
  border-right: 1px solid #d2d2d2;
  padding: 10px 10px;
  height: 100%;
  background-color: #fff;
  cursor: pointer;
  color: #3a79b5;
}

</style>
